{include file="admin/common/header" /}
<style>
    .content-face span {
        padding: 4px 0;
        width: 36px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        font-size: 20px;
    }
</style>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label required">网站标题</label>
                <div class="layui-input-block ">
                    <textarea class="layui-textarea" name="content" id="actionTextarea"
                              lay-verify="required"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block ">
                    <div class="content-face" id="contentFace"></div>
                </div>
            </div>

            <div class="layui-form-item huicmf-upload">
                <div class="layui-input-group">
                    <label class="layui-form-label">多图选择</label>
                    <div class="layui-input-block">
                        <a class="layui-btn"
                           data-open-pic="/admin/index/file_list?type=more&select_id=uploader-list"><i
                                class="layui-icon">&#xe67c;</i>选择图片</a>
                    </div>
                    <div class="layui-input-suffix">
                        <i class="layui-icon layui-icon-tips"></i> 推荐图片比例：1:1
                    </div>
                </div>

                <tip>(可拖拽图片调整显示顺序 )</tip>
                <div class="layui-input-block">
                    <!--回调显示选择的图片-->
                    <div class="uploader-list am-cf" id="uploader-list" data-nums="9"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="启用" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <input type="hidden" name="id" id="id" value="">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="admin-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{include file="admin/common/footer" /}
<script>
  layui.use(['form', 'jquery', 'ddSort'], function () {
    let form = layui.form;
    let $ = layui.jquery;

    // 图片列表拖动，需要引入ddSort
    $('.uploader-list').DDSort({
      target: '.file-item',
      delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
      floatStyle: {
        'border': '1px solid #ccc',
        'background-color': '#fff'
      }
    });

    form.render();

    var face = ['💪', '✌', '👌', '👍', '✊', '👊', '👏', '🙏', '👮', '🙎', '🌞', '🌙', '🔥', '👀', '🚀', '🎈', '🎀', '🎁', '💋', '💖', '❤️', '🍉', '🍊', '🥭', '🍎', '🍑', '🍓', '🍇', '🍑', '🍒', '🍓', '🥝', '🍅', '🌺', '🌹', '🍀', '🏆', '⚽', '⚾', '🏀', '🏡', '🏬', '🏰', '🚌', '🚐', '🈶', '🉐', '🈵', '🆗', '📢', '🕘', '✏️', '💳', '💰', '📙', '📆', '✔️', '❌', '⭐', '☁️', '⛅', '⛈️', '🌤️', '🌧️', '🌩️', '🌪️', '🦀', '🦞', '🦐', '🍔', '🍟', '🍕', '🎂', '🍰', '🧁', '🍷', '🍸', '🍹', '🫖', '🍵', '😀', '😁', '😂', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', '😚', '😇', '😐', '😶', '😏', '😣', '😥', '😮', '😪', '😫', '😴', '😛', '😒', '😓', '😕', '😷', '😤', '😢', '😭', '😨', '😬', '😰', '😱', '😳', '😵', '😡', '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '🟤', '⚫', '⚪', '🟥', '🟧', '🟨', '🟩', '🟦', '🟪', '🟫', '⬛', '🔶', '🔷', '🔸', '🔹', '🔺', '🔻', '💯', '💢', '💥', '💤', '⛔', '🚫', '🏯', '🌄', '🌅', '🏅', '🥇', '🥈', '🥉', '🎯', '🀄', '🎨', '🎲'];
    var faceStr = '';
    for (var i = 0; i < face.length; i++) {
      faceStr += '<span>' + face[i] + '</span>';
    }
    $('#contentFace').html(faceStr);

    $('.content-face').on('click', 'span', function () {
      var txt = $(this).html();
      var obj = $("#actionTextarea").get(0);
      if (document.selection) {
        obj.focus();
        var sel = document.selection.createRange();
        sel.text = txt;
      } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
        var startPos = obj.selectionStart;
        var endPos = obj.selectionEnd;
        var tmpStr = obj.value;
        obj.value = tmpStr.substring(0, startPos) + txt + tmpStr.substring(endPos, tmpStr.length);
        obj.setSelectionRange(startPos + 2, startPos + 2);
      } else {
        obj.value += txt;
      }
    })

    form.on('submit(admin-save)', function (data) {
      var thumbs = {};
      $('input[name^="params[thumbs]"]').each(function (index, element) {
        thumbs[index] = $(this).val();
      })

      $.ajax({
        url: "/app/huiblog/action/add",
        data: {
          content: $('#actionTextarea').val(),
          thumbs: thumbs,
        },
        type: 'post',
        success: function (res) {
          if (res.code === 200) {
            hui_msg(res.msg, 1, function () {
              window.location.reload();
            });
          } else {
            hui_msg(res.msg, 2);
          }
        }
      })
      return false;
    });
  })
</script>
<script>
</script>
</body>
</html>
